<script>
import AmountInput from '@/components/amountInput'

export const FormStruct = {
  schoolName: '',
  schoolType: null, // obj
  major: '',
  beginDate: null,
  endDate: null,
  certificate: '',
  certificateNo: ''
}

export default {
  components: {
    AmountInput
  },
  props: {
    value: {
      type: Object,
      required: true,
      default() {
        return null
      }
    },
    schoolTypeOptions: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      // form:{
      //     schoolName:'',
      //     schoolType:null,
      //     major:'',
      //     beginDate:null,
      //     endDate:null,
      //     certificate:'',
      //     certificateNo:''
      // },
      validate: null, // Form 的校验函数
      resetFields: null, // 重置函数
      formRules: {
        schoolName: [{ required: true, message: '学校名称不能为空', trigger: ['blur', 'change'] }],
        beginDate: [{ required: true, message: '请选择起始日期', trigger: ['blur', 'change'] }],
        endDate: [{ required: true, message: '请选择结束日期', trigger: ['blur', 'change'] }]
      }
    }
  },
  computed: {
    form: {
      get() {
        return this.value
      },
      set(form) {
        this.$emit('input', { ...form })
      }
    },
    attrs() {
      const attrs = { ...this.$attrs }

      attrs['model'] = this.form
      attrs['rules'] = this.formRules

      const unnecessaryAttrs = [
        'layout'
      ]

      for (const attr of unnecessaryAttrs) { delete attrs[attr] }

      return attrs
    },
    colSpan() {
      return this.layout === 'horizontal' ? 12 : 24
    }
  },
  mounted() {
    this.validate = this.$refs.form?.validate
    this.resetFields = this.$refs.form?.resetFields
  },
  methods: {
    valid() {
      return new Promise((resolve, reject) => {
        this.$refs.form.validate(valid => {
          if (!valid) resolve(false)
          resolve(true)
        })
      })
    }
  }
}
</script>

<template>
  <div class="educational-experience-container">
    <el-form
      ref="form"
      v-bind="attrs"
    >

      <el-row :gutter="36">
        <el-col :span="colSpan">
          <el-form-item label="学校名称" prop="schoolName">
            <el-input
              v-model="form.schoolName"
              placeholder="请填写学校名称"
            />
          </el-form-item>

          <el-form-item label="专业" prop="major">
            <el-input
              v-model="form.major"
              placeholder="请填写专业"
            />
          </el-form-item>

          <el-form-item label="起始日期" prop="beginDate">
            <el-date-picker
              v-model="form.beginDate"
              type="date"
              style="width: 100%;"
              placeholder="请选择起始日期"
            />
          </el-form-item>

          <el-form-item label="结束日期" prop="endDate">
            <el-date-picker
              v-model="form.endDate"
              type="date"
              style="width: 100%;"
              placeholder="请选择结束日期"
            />
          </el-form-item>

          <el-form-item label="学历类型" prop="schoolType">
            <el-select
              v-model="form.schoolType"
              placeholder="请选择学历类型"
              style="width: 100%;"
            >
              <el-option
                v-for="option in schoolTypeOptions"
                :key="option.value.value"
                :label="option.label"
                :value="option.value"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="colSpan">

          <el-form-item label="证书" prop="certificate">
            <el-input
              v-model="form.certificate"
              placeholder="请填写证书"
            />
          </el-form-item>

          <el-form-item label="证书编号" prop="certificateNo">
            <el-input
              v-model="form.certificateNo"
              placeholder="请填写证书编号"
            />
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
  </div>
</template>

<style lang="scss">
</style>
